<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <title>幸运大转盘</title>
    <style type="text/css">
        .demo {
            width: 417px;
            height: 417px;
            position: relative;
            margin: 50px auto
        }

        #disk {
            width: 417px;
            height: 417px;
            background: url(__IMG__/disk.jpg) no-repeat
        }

        #start {
            width: 163px;
            height: 320px;
            position: absolute;
            top: 46px;
            left: 130px;
        }

        #start img {
            cursor: pointer
        }
    </style>
</head>
<body>
<div class="demo">
    <div id="disk"></div>
    <div id="start"><img src="__IMG__/start.png" id="startbtn"></div>
</div>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript" src="__JS__/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="__JS__/jquery.easing.min.js"></script>
<script>
    $(function () {
        $("#startbtn").click(function () {
            lottery();
        });
    });
    function lottery() {
        $.ajax({
            type: 'post',
            url: "{:\\think\\Url::build('getRe')}",
            dataType: 'json',
            success: function (result) {
                if (result.code == 1) {
                    var a = result.data.angle; //角度
                    var p = result.data.name; //奖项
                    $("#startbtn").rotate({
                        duration: 3000, //转动时间
                        angle: 0,
                        animateTo: 1800 + a, //转动角度
                        easing: $.easing.easeOutSine,
                        callback: function () {
                            alert('恭喜你，抽中 ' + p);
                        }
                    });
                } else {
                    alert(result.msg);
                }
            }
        });
    }
</script>
</body>
</html>